<template>
  <div class="login-tenant">
    <div class="login-form">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
      <el-alert v-if="error" type="error" :closable="false">{{ error }}</el-alert>
      <el-alert v-if="success" type="success" :closable="false">{{ success }}</el-alert>
    </div>
    <el-button type="primary" @click="login">登录</el-button>
  </div>
</template>

<script>
import AxiosMethods from '@/util/AxiosMethods';
export default {
  data() {
    return {
      username: '',
      password: '',
      error: '',
      success: '',
    }
  },
  methods: {
    // 登录功能
    async login() {
        const params={
          username: this.username,
          password: this.password,
        };
        try{
          const res = await AxiosMethods.post('/user/login', params);
          if(res.data.code === 1){
            this.success = res.data.msg;
            this.error = '';
            const data={
              confirm:res.data.data,
              username:this.username,
              password:this.password,
            }
            this.$store.commit('User/UserLogin',data);
          }else{
            this.error = res.data.msg;
            this.success = '';
          }
        }catch(err){
          console.log(err);
          this.error = '注册失败，请稍后再试';
          this.success = '';
        }
      }
  },
}
</script>

<style scoped>
.login-tenant {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.el-input {
  width: 300px;
  margin-bottom: 15px;
}

.el-button {
  width: 300px;
}
</style>
